{% extends 'base_dashboard.html' %}

{% block title %}{{ action }} — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="mb-4">
  <div class="text-muted small">Admin · Email</div>
  <h3 class="fw-bold mb-1">{{ action }}</h3>
  <p class="text-muted small mb-0">
    Use placeholders like {% verbatim %}<code>{{ user_name }}</code> and <code>{{ institute_name }}</code>{% endverbatim %}.
    Set trigger to <strong>On user signup</strong> for onboarding emails.
  </p>
</div>

<div class="card border-0 shadow-sm">
  <div class="card-body p-4">
    <form method="post" novalidate>
      {% csrf_token %}
      {% if form.non_field_errors %}
        <div class="alert alert-danger">{{ form.non_field_errors }}</div>
      {% endif %}
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">Name</label>
          {{ form.name }}
          {% if form.name.errors %}<div class="text-danger small">{{ form.name.errors.0 }}</div>{% endif %}
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">Slug</label>
          {{ form.slug }}
          {% if form.slug.errors %}<div class="text-danger small">{{ form.slug.errors.0 }}</div>{% endif %}
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">Trigger</label>
          {{ form.trigger }}
          {% if form.trigger.errors %}<div class="text-danger small">{{ form.trigger.errors.0 }}</div>{% endif %}
        </div>
        <div class="col-md-6 d-flex align-items-end">
          <div class="form-check form-switch">
            {{ form.is_active }}
            <label class="form-check-label" for="{{ form.is_active.id_for_label }}">Active</label>
          </div>
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">Subject</label>
          {{ form.subject }}
          {% if form.subject.errors %}<div class="text-danger small">{{ form.subject.errors.0 }}</div>{% endif %}
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">HTML body</label>
          {{ form.body_html }}
          {% if form.body_html.errors %}<div class="text-danger small">{{ form.body_html.errors.0 }}</div>{% endif %}
        </div>
        <div class="col-12">
          <label class="form-label fw-semibold">Plain text (optional)</label>
          {{ form.body_text }}
        </div>
      </div>
      <div class="d-flex gap-2 mt-4">
        <a href="{% url 'dashboard:email_templates' %}" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">Save template</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}